import {
  Button,
  CalendarCard,
  Cell,
  DatePicker,
} from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useRef, useState } from "react";
import "./index.scss";
import { goToPage, toSuccessTransferHome } from "@/utils/common";

const Calendar = () => {
  const [show2, setShow2] = useState(false);
  const [desc2, setDesc2] = useState("");
  const CalendarCardRef = useRef(null);
  const [date, setDate] = useState(() => new Date());
  const onChange = (val) => {
    console.log(val);
    if (val) {
      // setDate(val);
      goToPage("pages/taskHistory/index");
    }
  };

  const onHandleTime = (values, options) => {
    console.log(values, options);
    setDesc2(`${values[0]}-${values[1]}`);
    CalendarCardRef.current?.jumpTo(values[0], values[1]);
  };

  return (
    <View className="calendar">
      <Cell
        title="日期选择"
        description={desc2}
        onClick={() => setShow2(true)}
      />
      <Button
        type="primary"
        className="btn"
        onClick={() => {
          goToPage("pages/integral/appeal/record/index");
        }}
      >
        跳转 申诉记录
      </Button>
      <Button
        type="primary"
        className="btn"
        onClick={() => {
          toSuccessTransferHome({
            title: "跳转成功",
            delay: 3,
            // backUrl: "/pages/integral/appeal/detail/index",
            backPageName: "积分日历",
            btnTitle: "返回积分日历",
          });
        }}
      >
        跳转 中转页面
      </Button>
      <DatePicker
        title="日期选择"
        endDate={new Date()}
        type="year-month"
        visible={show2}
        onClose={() => setShow2(false)}
        onConfirm={(options, values) => onHandleTime(values, options)}
      />
      <CalendarCard
        ref={CalendarCardRef}
        // disableDay={(day) => {
        //   const current = new Date(`${day.year}-${day.month}-${day.date}`);
        //   const currentD = current.getDate();
        //   const currentM = current.getMonth();
        //   const currentY = current.getFullYear();
        //   const today = new Date();
        //   const todayD = today.getDate();
        //   const todayM = today.getMonth();
        //   const todayY = today.getFullYear();
        //   return (
        //     todayY === currentY && todayM === currentM && currentD >= todayD
        //   );
        // }}
        // value={new Date()}
        onChange={onChange}
      />
    </View>
  );
};

export default Calendar;
